iT邦幫忙

2021 iThome 鐵人賽

DAY 6
0
Modern Web

我的菜很有Vue味~系列 第 6

Day6 Vue實體的生命週期

  • 分享至 

  • xImage
  •  

這是在Vue官網提供的式意圖:

紅框白底的是各個鉤子函式的名稱,這些鉤子代表 Vue 實體的每個階段,分別的介紹如下:

beforeCreate : 實例初始化立即叫用,這時還未創建實例,所以任何 Vue 實體中的設定(例如: data )都還未配置。

created : 完成創建實例,這時 Vue 實體中的配置除了 $el 外已全部配置,而 $el 要在掛載模板後才會配置。

beforeMount : 在 Vue 實體中的定義被掛載到目標元素之前叫用,這時的 $el 會是還未被 Vue 實體中的定義渲染的初始設定模板。

mounted : Vue 實體上的設置已經安裝上模板,這時的 $el 是已經藉由實體中的定義渲染而成的真正的頁面。

beforeUpdate : 當實體中的 data 產生變化後或是執行 vm.$forceUpdate() (opens new window)叫用,這時的頁面還未被重渲染為改變後的畫面。

updated : 在重新渲染頁面後叫用,這時的頁面已經被重渲染成改變後的畫面。

beforeDestroy : 在此實體被銷毀前時叫用,這時實體還是擁有完整的功能。

destroyed : 此實體被銷毀後叫用,這時實體中的任何定義( data 、 methods...等)都已被解除綁定,代表在此做的任何操作都會失效。

今天就先到這了,明天見~


上一篇
Day5 開始Vue前要具備的基礎
下一篇
Day7 Vue的起手式
系列文
我的菜很有Vue味~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言